// FeedbackModal.tsx
import React from 'react';
import { Button, Modal, Input } from 'antd';
import { useState } from 'react';

interface FeedbackModalState {
    visible: boolean;
    feedback: string;
}

// 自定义钩子
function useFeedbackModal() {
    const [state, setState] = useState<FeedbackModalState>({ visible: false, feedback: '' });

    const showModal = () => {
        setState({ ...state, visible: true });
    };

    const handleOk = () => {
        console.log('Feedback:', state.feedback);
        setState({ visible: false, feedback:'' });
    };

    const handleCancel = () => {
        setState({ ...state, visible: false });
    };

    // 修改事件处理函数的参数类型
    const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        setState({ ...state, feedback: e.target.value });
    };

    return { ...state, showModal, handleOk, handleCancel, handleInputChange };
}

const FeedbackModal: React.FC = () => {
    const { visible, feedback, showModal, handleOk, handleCancel, handleInputChange } = useFeedbackModal();

    return (
        <div>
            <Button type="text" onClick={showModal}>
                遇到问题？请联系我们
            </Button>
            <Modal
                title="请反馈您的问题"
                visible={visible}
                onOk={handleOk}
                onCancel={handleCancel}
                okText="确认提交"
            >
                <Input.TextArea
                    placeholder="请输入您的问题"
                    value={feedback}
                    onChange={handleInputChange} // 使用正确的事件处理函数
                    autoSize={{ minRows: 3, maxRows: 5 }}
                    style={{ marginBottom: 20, marginTop: 20 }}
                />
            </Modal>
        </div>
    );
};

export default FeedbackModal;